<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人中心</title>
    <link rel="stylesheet" href="css/base.css" />
    <link rel="stylesheet" href="./css/iconfont.css" />
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
            background: #F6F6F6;
        }

        .container {
            background: #F6F6F6;
        }

        .container .my-head {
            width: 100%;
            height: 7.4rem;
            background: #169BD4;

            position: relative;
        }

        .my-head .has-img {
            width: 6rem;
            height: 6rem;
            /* background: orange; */
            border-radius: 50%;
            border: 1px #fff solid;
            background-position: center center;
            background-size: cover;
            background-repeat: no-repeat;
            background-size: 100% 100%;
            margin: 0.5rem;

        }

        /* .my-head .has-img img {
            border-radius: 50%;
            width: auto;
            height: auto;
            max-width: 81%;
            max-height: 81%;
            
            position: absolute;
            left: 22px;
            top: 10px;
        } */

        .my-head .head-content {
            width: 64%;
            height: 100%;
            /* background: orangered; */
            position: absolute;
            right: 0;
            display: flex;
            justify-content: center;
            align-items: flex-start;
            flex-direction: column;
        }

        .my-head .head-content p {
            font-size: 2.4em;
            color: #fff;
        }

        /* 引入第三方或自定义的字体图标样式 */


        .c-has-icon {
            position: relative;
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;

        }

        .c-has-icon .has-icon {
            position: absolute;
            left: 14px;
            top: 14px;
            z-index: 999;
        }

        .my-show {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: row;
            padding: 0.5rem;
            margin-bottom: 0.3rem;
            background: #fff;
        }

        .my-show .show-item {
            width: 25%;
            text-align: center;
            border-right: 1px #ddd solid;
        }

        .my-show .show-item .number-green {
            font-size: 1rem;
            color: #29C3BA;
        }

        .my-show .show-item .desc-show {
            font-size: 1rem;
        }

        .my-nav .b .c-has-icon {
            margin-bottom: 1px;
            padding: 0.8rem 2rem;
            background: #fff;
        }

        .my-nav .b {
            margin-bottom: 13px;
        }

        .img-box {
            position: absolute;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="my-head">
            <div class="img-box">
                <div class="has-img" style="background-image: url('./image/t1.png');">
                </div>
            </div>
            <div class="head-content">
                <p class="name">孙行者</p>

            </div>

        </div>
        <div class="my-nav">
            <div class="my-nav-info b">
                <div id="personal" class="c-has-icon">
                    <div class="has-icon">
                        <i class="iconfont my-icon-gerenxinxi"></i>
                    </div>
                    <p>个人资料</p>
                    <i class="iconfont my-icon-weimingmingwenjianjia_jiantou"></i>
                </div>
                <div id="collection" class="c-has-icon">
                    <div class="has-icon">
                        <i class="iconfont my-icon-icon-test"></i>
                    </div>
                    <p>收藏企业</p>
                    <i class="iconfont my-icon-weimingmingwenjianjia_jiantou"></i>
                </div>
            </div>
            <div class="my-nav-service b">

                <div id="customer" class="c-has-icon">
                    <div class="has-icon">
                        <i class="iconfont my-icon-lianxikefu"></i>
                    </div>
                    <p>联系客服</p>
                    <i class="iconfont my-icon-weimingmingwenjianjia_jiantou"></i>
                </div>
                <div id="feedback" class="c-has-icon">
                    <div class="has-icon">
                        <i class="iconfont my-icon-yijianfankui"></i>
                    </div>
                    <p>意见反馈</p>
                    <i class="iconfont my-icon-weimingmingwenjianjia_jiantou"></i>
                </div>
            </div>

            <div class="my-nav-tool b">
                <div id="relieve" class="c-has-icon">
                    <div class="has-icon">
                        <i class="iconfont my-icon-jiebang"></i>
                    </div>
                    <p>解绑账号</p>
                    <i class="iconfont my-icon-weimingmingwenjianjia_jiantou"></i>
                </div>
                <div id="exit" class="c-has-icon">
                    <div class="has-icon">
                        <i class="iconfont my-icon-tuichu"></i>
                    </div>
                    <p>退出</p>
                    <i class="iconfont my-icon-weimingmingwenjianjia_jiantou"></i>
                </div>

            </div>
        </div>
    </div>
</body>
<script src="js/jqAlert2.js"></script>
<script>
    $("#personal").click(function () {
        $(location).attr('href', 'http://www.baidu.com');
    });
    $("#collection").click(function () {
        $(location).attr('href', 'http://www.baidu.com');
    });
    $("#customer").click(function () {
        $(location).attr('href', 'http://www.baidu.com');
    });
    $("#feedback").click(function () {
        $(location).attr('href', 'http://www.baidu.com');
    });
    $("#relieve").click(function (e) {
        jqAlert.Confirm('请确认', function (event) {
            console.log($(event).attr('id'));
            console.log(event.id);
            console.log(e.target.id);
            $(location).attr('href', 'http://www.baidu.com');
        }, e);

    });
    $("#exit").click(function (e) {
        //第一个参数是提示信息
        //第二个参数是点击确定的回调函数，如果需要操作数据，必须传参数event
        //第三个参数是获取当前事件的，不传获取不到节点
        jqAlert.Confirm('请确认', function (event) {
            console.log($(event).attr('id'));
            console.log(event.id);
            console.log(e.target.id);
            $(location).attr('href', 'http://www.baidu.com');
        }, e);
    });


</script>

</html>